<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:comps="http://java.sun.com/jsf/composite/components">
	
<h:body>
		
	<ui:composition template="/resources/templates/mainTemplate.xhtml">
		
		<ui:define name="conteudo">
			
			<h:panelGroup layout="block" styleClass="conteudoInicio">
			
				<h:panelGroup layout="block" styleClass="container">
				
					<h:panelGrid columns="3" width="100%" 
						columnClasses="
							gridVerticalAlignTop columnEsquerda, 
							gridVerticalAlignTop columnCentro, 
							gridVerticalAlignTop columnDireita">
						
						<h:panelGroup layout="block">
							
							<p:menu styleClass="menuVertical" model="#{PaginaInicialBean.menuVertical}" />
						
						</h:panelGroup>
						
						<h:panelGroup style="vertical-align: top;">
							
							<f:facet name="header">
								<h:outputText value="#{locale['sistema.paginaInicial.panels.sobre']}" />
							</f:facet>						
							
							<ui:repeat var="categoria" value="#{PaginaInicialBean.allCategorias}">
							
								<comps:CategoriaItem
									rendered="#{categoria.posts.size() gt 0}"
									itensPorPagina="3"
									tituloCategoria="#{categoria.nome}" 
									noticiasCategoria="#{categoria.posts}" />
							
							</ui:repeat>
							
						</h:panelGroup>
						
						<ui:include src="/resources/templates/conteudoRightSideTemplate.xhtml" />
					
					</h:panelGrid>
		
				</h:panelGroup>
			
			</h:panelGroup>
			
			<p:dialog id="comentarioDialogo"
				position="430, 30"
				widgetVar="comentarioDlg"
				modal="true" showEffect="slide" hideEffect="slide"
				resizable="false">
				
				<f:facet name="header">
					<h:outputText id="tituloModalComentarios" value="Comentarios da noticia #{PaginaInicialBean.postSelecionado.titulo}" />
				</f:facet>
			
				<h:form id="comentarioForm" prependId="false">
				
					<h:panelGroup layout="block" styleClass="comentarPost">
					
						<h:panelGroup layout="block" 
							style="text-align: center;"
							rendered="#{!SessaoBean.autenticado}"
							styleClass="comentarPrimeiro">
				
							<p:commandButton id="loginBtnDlg"
								style="margin-top: 3px; font-size: 0.85em;"
								styleClass="ui-priority-primary"
								value="#{locale['blog.post.autenticarPrimeiro']}"
								type="button"
								onclick="loginDlg.show();" />										
												
						</h:panelGroup>				
					
						<h:panelGroup layout="block"
							style="text-align: center; padding: 5px; margin-bottom: 10px; margin-top: 10px; font-weight: bold;"
							rendered="#{PaginaInicialBean.postSelecionado.comentarios.size() lt 1}"
							styleClass="comentarPrimeiro">
							
							<h:outputText value="Seja o primeiro a comentar" />
						
						</h:panelGroup>
						
						<h:panelGroup layout="block">
							
							<h:panelGroup layout="block" 
								style="padding: 0px 0px 10px 0px;"
								styleClass="quantidadeComentarios">
								
								<h:panelGrid columns="3">
								
									<p:graphicImage
										library="images/sistema"
										name="blog-msg-icon.png" />
										
									<p:spacer width="5" />							
									
									<h:outputFormat value="#{locale['blog.post.comentariosRealizados']}">
										<f:param value="#{PaginaInicialBean.postSelecionado.comentarios.size()}" />
									</h:outputFormat>
																						
								</h:panelGrid>
														
							</h:panelGroup>
						
							<h:panelGrid columns="2" rendered="#{SessaoBean.autenticado}">
							
								<p:graphicImage 
									value="resources/images/usuarios/#{SessaoBean.usuarioAutenticado.avatar}" 
									width="25" height="25" />
								
								<h:panelGroup layout="block" styleClass="comentarioAutor">
									<h:outputText value="#{SessaoBean.usuarioAutenticado.nome}" />
								</h:panelGroup>
							
							</h:panelGrid>
					
							<h:panelGroup layout="block"
								style="width: 400px !important;"
								rendered="#{SessaoBean.autenticado}" 
								styleClass="formularioComentario">
							
								<p:message for="texto" />
	
								<h:panelGrid columns="1">
	
									<p:inputTextarea id="texto"
										style="font-size: 1em !important;"
										required="true"
										counter="counterComentario" maxlength="140"
										cols="62"
										rows="3"
										value="#{PaginaInicialBean.comentario.texto}"      
		    							counterTemplate="{0} caracteres restantes." 
								    	autoResize="true"/>  
									
									<h:panelGrid columns="2">
										
										<h:panelGroup layout="block" style="width: 312px">
											<h:outputText style="font-size: 0.85em;" id="counterComentario" />
										</h:panelGroup>
									
										<p:commandButton value="#{locale['blog.post.comentar.botao']}"
											update="comentarioForm comentariosList"
											action="#{PaginaInicialBean.comentar()}" />	
										
									</h:panelGrid>					
	
								</h:panelGrid>
								
							</h:panelGroup>
						
						</h:panelGroup>
					
					</h:panelGroup>
				
					<p:dataList id="comentariosList"
						styleClass="comentariosDataList" 
						var="comentario" value="#{PaginaInicialBean.postSelecionado.comentarios}"
						paginator="true" paginatorAlwaysVisible="true" paginatorPosition="bottom"
						rows="5"
						type="none">
						
						<h:panelGroup layout="block"
							style="padding: 0px 5px 0px 5px;"
							styleClass="comentarioGeralItem">
						
							<h:panelGrid columns="2">
							
								<p:graphicImage 
									value="resources/images/usuarios/#{comentario.autor.avatar}" 
									width="20" height="20" />
									
								<h:panelGroup layout="block" 
									style="font-weight: bold; color: #22699D; font-size: 0.80em;"
									styleClass="comentarioGeralAutorData">
									<h:outputText value="#{comentario.autor.nome}" />
									<br />
									<h:outputText value="#{comentario.data}">
										<f:convertDateTime pattern="'em' dd 'de' MMMM 'de' yyyy" />
									</h:outputText>					
								</h:panelGroup>							
							
							</h:panelGrid>					
							
							<h:panelGroup layout="block"
								style="padding: 5px; margin-bottom: 5px; border-bottom: solid 1px #DFDFDF;"
								styleClass="comentarioGeralTexto">
								<h:outputText value="#{comentario.texto}" style="width: 250px;" />	
							</h:panelGroup>	
						
						</h:panelGroup>					
					
					</p:dataList>
					
				</h:form>			
			
			</p:dialog>
				
		</ui:define>
		
	</ui:composition>
										
</h:body>

</html>